<%--
  Created by IntelliJ IDEA.
  User: WangWeiwei
  Date: 16-10-17
  Time: 下午5:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path;
    request.setAttribute("basePath", basePath);
%>
<div class="top-grids">
    <div style="margin: 50px;"></div>
    <div class="recommended-info">
        <div class="jumbotron container" style="padding-left: 20px;">
            <h3>${web['title']}</h3>
            <p>商品列表已经被列出了,你可以输入商品名进行快速检索</p>
            <div class="row">
                <div class="input-group col-xs-5" style="float: left;">
                    <input type="text" class="form-control " placeholder="输入商品名快速检索" id="search-query-3">
                    <span class="input-group-btn">
                    <button type="submit" class="btn"><span class="fui-search"></span></button>
                 </span>
                </div>
                <button id="conditions-for-screening-btn" class="btn btn-default col-xl-4">条件筛选</button>
                <button id="add-new-goods" class="btn btn-success"
                        data-title="新建商品"
                        addtabs="add-goods"
                        ajax="true"
                        url="${basePath}/manager/goods/add_goods"
                >新建商品</button>
            </div>
            <script>
                $(function(){
                    $('.input-group').on('focus', '.form-control', function () {
                        $(this).closest('.input-group, .form-group').addClass('focus');
                    }).on('blur', '.form-control', function () {
                        $(this).closest('.input-group, .form-group').removeClass('focus');
                    });

                    //条件筛选按钮事件
                    $("#conditions-for-screening-btn").click(function () {
                        $("#conditions-for-screening-panel").toggle();
                    })
                    $("#conditions-for-screening-panel").hide();

                    //新建商品按钮
                    $("#add-new-goods").click(function () {
                        addTabs1($(this));
                    })
                })
            </script>
        </div>
    </div>
    <div class="panel panel-default" id="conditions-for-screening-panel">
        <div class="panel-heading">在以下条件中对商品进行筛选</div>
        <div class="panel-body">
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">商品详情</div>
        <div class="panel-body">
            <table class="table" contenteditable="true">
                <thead>
                <tr class="default">
                    <th>商品</th>
                    <th>类型</th>
                    <th>适用作物</th>
                    <th>适用症状</th>
                    <th>厂家</th>
                    <th>操作</th>
                </tr>
                </thead>
                <c:forEach var="goods" items="#{list}" varStatus="id">
                    <tr>
                            <c:if test="${id.count%2==0}"> style="background-color: #dbebec;" </c:if>
                        <td><c:out value="${goods.goodsName}">-</c:out></td>
                        <td><c:out value="${goods.type.name}">-</c:out></td>
                        <td>
                            <c:forEach var="crop" items="#{goods.crop}">
                                <c:out value="${crop.name},">-</c:out>
                            </c:forEach>
                        </td>
                        <td>
                                <%--使用症状--%>
                            <c:forEach var="sympton" items="#{goods.sympton}">
                                <c:out value="${sympton.name},">-</c:out>
                            </c:forEach>
                        </td>
                        <td><c:out value="${goods.productor.name}">-</c:out></td>
                        <td class="operate-goods" contenteditable="false">
                                <%--查看商品详情信息按钮--%>
                            <a href="#" style="color: #3498DB;"
                               operate="detail-goods"
                               data-toggle="tooltip"
                               data-placement="top"
                               data-title="<c:out value="${goods.type.name}">-</c:out><c:out value='${goods.goodsName}'>商品</c:out>的详情信息"
                               addtabs="goods-detail-<c:out value='${goods.id}'>1</c:out>"
                               ajax="true"
                               url="${basePath}/goods/detail_goods/<c:out value='${goods.id}'>1</c:out>">
                                <span class="glyphicon glyphicon-zoom-in"></span>
                            </a>
                            &nbsp;
                                <%--编辑商品详情信息按钮--%>
                            <a href="#" style="color: #1ABC9C;"
                               operate="detail-goods"
                               data-toggle="tooltip"
                               data-placement="top"
                               data-title="修改<c:out value="${goods.type.name}">-</c:out><c:out value='${goods.goodsName}'>商品</c:out>"
                               addtabs="goods-editor-<c:out value='${goods.id}'>1</c:out>"
                               ajax="true"
                               url="${basePath}/manager/goods/editor_goods/<c:out value='${goods.id}'>1</c:out>">
                                <span class="glyphicon glyphicon-pencil"></span>
                            </a>
                            &nbsp;
                            <a href="#" style="color: #E74C3C;"
                               data-toggle="tooltip" data-placement="top" title="删除此商品相关记录"
                               url="${basePath}/goods/detail_goods/<c:out value='${goods.id}'>1</c:out>">
                                <span class="glyphicon glyphicon-remove"></span>
                            </a>
                            &nbsp;
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<script src="${basePath}/resources/market/js/utils.js"></script>
<script>
    $(function () {
        //    激活提示工具
        $("[data-toggle='tooltip']").tooltip();
        //为查看按钮添加点击事件
        $(".operate-goods a[operate='detail-goods']").click(function () {
            addTabs1($(this));
        });
    })
</script>